<template>
    <!-- 基础组件 -->
    <div class="render-base" :style="{
        'position': element && element.draggable && element.options.parentPosition ? 'relative' : 'initial'
    }">
        <component :is="element.renderComponentName" :element="element" :Api='Api' :apiIndex="apiIndex" :previewOption="reportData.previewOption" :index="index"></component>
    </div>
</template>

<script>
export default {
    name: "RenderBase",
    props: {
        element: {
            type: Object
        },
        Api: {
            type: Object
        },
        apiIndex: {
            type: Number,
            default: 0
        },
        reportData: {
            type: Object
        },
        index: {
            type: Number
        }
    },
    components: {
        RenderText: () => import('./components/RenderText/RenderText.vue'),
        RenderDivider: () => import('./components/RenderDivider/RenderDivider.vue'),
        RenderImage: () => import('./components/RenderImage/RenderImage.vue'),
        RenderPicture: () => import('./components/RenderPicture/RenderPicture.vue'),
        RenderCanvasText: () => import('./components/RenderCanvasText/RenderCanvasText.vue'),
        RenderSelect: () => import('./components/RenderSelect/RenderSelect.vue')
    }
}
</script>
